<div v-cloak id="app" class="main-content">
    <div class="form-body" flex="main:left">
        <el-col class="options" :span="4" style="min-width:200px">
            <div class="options-item" :class="{'_selected':item.value == fdata.type}" @click="handleChange(item,index)"
                v-for="(item,index) in options">
                {{item.label}}
            </div>
        </el-col>
        <el-col :span="20">
        <one-form :config.sync="formConfig" v-model="fdata" :loading="loading" ref="ruleForm">
            <div slot='menuLeft'>
                <el-button class="button-item" :loading="loading" type="primary" @click="store('ruleForm')" size="small">
                    保存
                </el-button>
                <el-button size="small" @click="backpage()">返回</el-button>
            </div>
        </one-form>
        </el-col>
    </div>
</div>
<!-- 表单 -->
{include file='common@components/one-form'}
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                fdata:{},
                group:'',
                status:1,
                id:0,
                formConfig:{
                    data: {
                        type:'input'
                    },
                    formdesc:{},
                    labelWidth:'100px',
                    rowSize: 1, //一行可以展示几列表单，默认为3列
                },
                loading: false,
                defaultConfigColumns:[
                    {
                        label: "标题 :",
                        prop: "title",
                        type: "input",
                        content:"建议不超过4个字",
                        rules:{ required: true, message: '标题不能为空'},
                        bind: {
                            'placeholder': "建议不超过4个字",
                        },
                    },
                    {
                        label: "名称 :",
                        prop: "name",
                        type: "input",
                        content:"支持字母、下划线，必须以字母开头",
                        rules:{ required: true, message: '标题不能为空'},
                        bind: {
                            'placeholder': "支持字母、下划线，必须以字母开头",
                        },
                    },
                    {
                        label: "提示语 :",
                        prop: "tips",
                        type: "input",
                        bind: {
                            'placeholder': "提示语",
                        },
                    },
                ],
                options: [{
                        value: 'input',
                        label: '[input]单行文本',
                        columns:[
                            {
                                label: "默认值 :",
                                prop: "value",
                                type: "input",
                                bind: {
                                    'placeholder': "单行文本默认值",
                                },
                            }
                        ]
                    },
                    {
                        value: 'textarea',
                        label: '[textarea]多行文本',
                        columns:[
                            {
                                label: "默认值 :",
                                prop: "value",
                                type: "textarea",
                                bind: {
                                    'placeholder': "多行文本默认值",
                                },
                            }
                        ]
                    },
                    {
                        value: 'switch',
                        label: '[switch]开关',
                        columns:[
                            {
                                label: "默认值 :",
                                prop: "value",
                                type: "switch", 
                            }
                        ]

                    },
                    {
                        value: 'radio',
                        label: '[radio]单选按钮',
                        demoValue:'sh',
                        columns:[
                            {
                                label: "默认值 :",
                                prop: "value",
                                type: "input",
                                bind: {
                                    'placeholder': "单选按钮默认值",
                                },
                            },
                            {
                                label: "选项值 :",
                                prop: "options",
                                content:'多个请换行,示例 name:北京',
                                type: "textarea",
                                rules:{ required: true, message: '选项值能为空'},
                                bind: {
                                    'placeholder': "多个请换行,示例 name:北京",
                                },
                            },
                            {
                                label: "示例 :",
                                prop: "demo",
                                content:'多个请换行,示例 bj:北京',
                                type: "radio",
                                options:[
                                    {label:'北京',value:'bj'},
                                    {label:'上海',value:'sh'},
                                ],
                            }
                        ]
                    },
                    // {
                    //     value: 'checkbox',
                    //     label: '[checkbox]多选框',
                    //     demoValue:['bj'],
                    //     columns:[
                    //         {
                    //             label: "默认值 :",
                    //             prop: "value",
                    //             type: "input",
                    //             bind: {
                    //                 'placeholder': "多选框默认值",
                    //             },
                    //         },
                    //         {
                    //             label: "选项值 :",
                    //             prop: "options",
                    //             content:'多个请换行,示例 name:北京',
                    //             rules:{ required: true, message: '选项值能为空'},
                    //             type: "textarea",
                    //             bind: {
                    //                 'placeholder': "多个请换行,示例 name:北京",
                    //             },
                    //         },
                    //         {
                    //             label: "示例 :",
                    //             prop: "demo",
                    //             content:'多个请换行,示例 bj:北京',
                    //             rules:{ required: true, message: '选项值能为空'},
                    //             type: "checkbox",
                    //             options:[
                    //                 {label:'北京',value:'bj'},
                    //                 {label:'上海',value:'sh'},
                    //             ],
                    //         }
                    //     ]
                    // },
                    {
                        value: 'select',
                        label: '[select]下拉框',
                        demoValue:'bj',
                        columns:[
                            {
                                label: "默认值 :",
                                prop: "value",
                                type: "input",
                                bind: {
                                    'placeholder': "下拉框默认值",
                                },
                            },
                            {
                                label: "选项值 :",
                                prop: "options",
                                content:'多个请换行示例 name:北京',
                                rules:{ required: true, message: '选项值能为空'},
                                type: "textarea",
                                bind: {
                                    'placeholder': "多个请换行,示例 name:北京",
                                },
                            },
                            {
                                label: "示例 :",
                                prop: "radio",
                                content:'多个请换行,示例 bj:北京',
                                type: "radio",
                                options:[
                                    {label:'北京',value:'bj'},
                                    {label:'上海',value:'sh'},
                                ],
                                bind: {
                                    'value': [],
                                },
                            },
                            {
                                label: "示例 :",
                                prop: "select",
                                content:'多个请换行,示例 bj:北京',
                                type: "select",
                                options:[
                                    {label:'北京',value:'bj'},
                                    {label:'上海',value:'sh'},
                                ],
                                bind: {
                                    'value': [],
                                },
                            }
                        ]
                    },
                    {
                        value: 'date',
                        label: '[date]日期',
                        columns:[
                            {
                                label: "默认值 :",
                                prop: "value",
                                type: "date",
                                bind: {
                                    'placeholder': "日期",
                                },
                            }
                        ]

                    },
                    {
                        value: 'time',
                        label: '[time]时间',
                        columns:[
                            {
                                label: "默认值 :",
                                prop: "value",
                                type: "time",
                                bind: {
                                    'placeholder': "时间",
                                },
                            }
                        ]
                    },
                    {
                        value: 'datetime',
                        label: '[datetime]日期+时间',
                        columns:[
                            {
                                label: "默认值 :",
                                prop: "value",
                                type: "datetime",
                                bind: {
                                    'placeholder': "日期+时间",
                                },
                            }
                        ]
                    },
                    
                ],
            
            };
        },
        created(){
            
        },
        methods: {
            // 添加表单
            handleChange(item, index) {
                let _this = this
                _this.fdata = {
                    'group':_this.group,
                    'id':_this.id,
                    'status':_this.status,
                    'type':item.value,
                    'title':'',
                    'name':'',
                    'tips':'',
                    'value':'',
                    'options':'',
                    'demo':item.demoValue,
    
                }

                this.formConfig.formdesc = this.defaultConfigColumns.concat(item.columns);
                console.log(this.formConfig)
            },
            //表单验证
            getFormPromise(form) {
                return new Promise(resolve => {
                    form.validate(res => {
                        resolve(res);
                    })
                })
            },
            store(formName) {
                let _this = this;
                // 获取到组件中的form
                const configForm = this.$refs.ruleForm.$refs.ruleForm;
                // 使用Promise.all去校验结果,可加入多个表单
                Promise.all([configForm].map(this.getFormPromise)).then(res => {
                    const validateResult = res.every(item => !!item);
                    if (validateResult) {
                        _this.loading = true;
                        console.log('表单都校验通过');
                        let postData = _this.fdata
                        let _s = postData.id >0 ? 'system/config/edit' : 'system/config/add'
                        request({
                            params: {
                                s: _s,
                            },
                            method: 'post',
                            data: postData
                        }).then(e => {
                            _this.loading = false;
                            if (e.data.code == 0) {
                                navigateTo({
                                    s: 'system/config/index',
                                    group:_this.group
                                })
                            } else {
                                _this.$message.error(e.data.msg);
                            }
                        })

                    } else {
                        console.log('表单未校验通过');
                    }
                })
                
            },
            getDetail(id) {
                let _this = this;
                _this.loading = true;
                request({
                    params: {
                        s: 'system/config/edit',
                        group: _this.group,
                        id: id
                    },
                    method: 'get',
                }).then(e => {
                    _this.loading = false;
                    let res = e.data

                    if (res.code == 0) {

                        let _index = _this.options.findIndex((v,i,a)=>{
                            return v.value == res.data.type
                        })
                        this.handleChange(this.options[_index], 0)
                        console.log(_index)
                        _this.fdata = res.data
                        _this.fdata.demo = this.options[_index].demoValue
 
                        console.log(_this.fdata.value)
                    } else {
                        _this.$message.error(e.data.msg);
                    }
                })
            },
            backpage() {
                let _this = this
                navigateTo({
                    s: 'system/config/index',
                    group: _this.group

                })
            }
        },
        mounted: function () {
            this.group = getQuery('group')
            if (getQuery('id')) {
                this.getDetail(getQuery('id'));
            } else {
                this.status = 1;
                this.handleChange(this.options[0], 0)
            }
            
        }
    });
</script>
<style>
    .form-body .options {
        background-color: #F3F5F6;
        padding: 15px !important;
        margin-right: 40px;
        min-width: 180px;
    }
    .form-body .options .options-item:first-of-type {
        margin-top: 0
    }
    .form-body .options .options-item {
        height: 32px;
        line-height: 32px;
        margin-top: 10px;
        background-color: #fff;
        cursor: pointer;
        display: flex;
        justify-content: center;
    }
    .form-body .options-item._selected {
        color: #FFF !important;
        background-color: #00C250 !important;
    }
</style>